<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head th:replace="fragments/common :: head" />
<body>
  <div th:replace="fragments/common :: jQuery" />
  <div class="portletBody">
    <div id="menu" th:include="fragments/menus :: main (joinableset)" />
    <div>
      <h1 th:if="${joinableSetForm.joinableSetId == null}" th:text="#{joinableset.header.new}"></h1>
      <h1 th:if="${joinableSetForm.joinableSetId != null}" th:text="#{joinableset.header.edit}"></h1>
    </div>
    <div class="container-fluid">
      <div class="row">
        <div class="col-sm-6 row">
          <div class="sak-banner-error" th:if="${errorMessage != null}" th:text="${errorMessage}"></div>
          <p th:text="#{joinableset.instruction}">joinable sets consist of automatically created groups that users can elect to join.  Each group in a set begins with the set name and ends with a unique number.  An individual can join one group per set.</p>
        </div>
      </div>
    </div>
    <div class="container-fluid">
      <div class="row">
        <div class="col-sm-6 row">
          <form id="createnewjoinableset-form" action="#" th:action="@{/saveJoinableSet}" th:object="${joinableSetForm}" method="post">
            <input type="hidden" th:if="${joinableSetForm.joinableSetId != null}" name="joinableSetId" th:value="${joinableSetForm.joinableSetId}"/>
              <div id="setName" class="mb-2">
                <label for="groupTitle" class="form-control-label" th:text="|* #{joinableset.setname}|">Set name:</label>
                <input class="form-control" name="groupTitle" id="groupTitle" type="text" th:placeholder="#{joinableset.setname}" th:field="*{groupTitle}" required="required"/>
              </div>
              <div th:if="${joinableSetForm.joinableSetId == null}" class="mb-2">
                <label class="form-control-label" for="groupNumber" th:text="|* #{joinableset.numberofgroups}|">Number of groups:</label>
                <input class="form-control" name="groupNumber" id="groupNumber" type="number" min="1" max="999" th:data-required="${joinableSetForm.joinableSetId == null}" th:field="*{groupNumber}"/>
              </div>
              <div th:if="${joinableSetForm.joinableSetId == null}" class="mb-2">
                <label class="form-control-label" for="groupMaxMembers" th:text="|* #{joinableset.maxmembers}|" th:field="*{groupMaxMembers}">Max members per group:</label>
                <input class="form-control" name="groupMaxMembers" id="groupMaxMembers" type="number" min="1" max="999" th:field="*{groupMaxMembers}"/>
              </div>
              <div class="mb-2">
                <label class="form-control-label" for="joinableOpenDate" th:text="|#{joinableset.label.opendate}:|">Opening date:</label>
                <input id="joinableOpenDate" type="datetime-local" max="2099-12-31T23:59" class="form-control" name="joinableOpenDate" th:field="*{joinableOpenDate}"/>
              </div>
              <div class="mb-2">
                <label class="form-control-label" for="joinableCloseDate" th:text="|#{joinableset.label.closedate}:|">Closing date:</label>
                <input id="joinableCloseDate" type="datetime-local" max="2099-12-31T23:59" class="form-control" name="joinableCloseDate" th:field="*{joinableCloseDate}"/>
              </div>
              <div class="mb-2">
                <label for="sendMail">
                  <input class="form-check-input" name="sendMail" id="sendMail" type="checkbox" th:field="*{sendMail}"/>
                  <span th:text="#{joinableset.checkbox.sendmail}">Send mail to participants indicating the opening and/or closing date</span>
                </label>
              </div>
              <div class="mb-2">
                <label id="setReminderLbl" for="setReminder">
                  <input class="form-check-input" name="setReminder" id="setReminder" type="checkbox" th:field="*{setReminder}"/>
                  <span th:text="#{joinableset.checkbox.setreminder}">Generate or update the reminder sent 24h before the closing date</span>
                </label>
              </div>
              <hr>
              <div class="mb-2">
                <label for="allowUnjoin">
                  <input class="form-check-input" name="allowUnjoin" id="allowUnjoin" type="checkbox" th:field="*{allowUnjoin}"/>
                  <span th:text="|#{joinableset.allow.unjoin} #{joinableset.info.closedate}|">Allow members to unjoin (leave) groups in this set after joining</span>
                </label>
              </div>
              <div class="mb-2" th:if="${joinableSetForm.joinableSetId == null}">
                <label for="allowPreviewMembership">
                  <input class="form-check-input" name="allowPreviewMembership" id="allowPreviewMembership" type="checkbox" th:field="*{allowPreviewMembership}"/>
                  <span th:text="#{joinableset.allow.previewmembership}">Allow user to see group membership before joining</span>
                </label>
              </div>
              <div class="mb-2" th:if="${joinableSetForm.joinableSetId == null}">
                <label for="allowViewMembership">
                  <input class="form-check-input" name="allowViewMembership" id="allowViewMembership" type="checkbox" th:field="*{allowViewMembership}"/>
                  <span th:text="#{joinableset.allow.viewmembership}">Allow members to see the other members of these groups after joining</span>
                </label>
              </div>
              <div th:if="${joinableSetForm.joinableSetId != null}" class="mb-2">
                <div id="accordion">
                  <div class="card">
                    <div class="card-header">
                      <h4 class="card-title">
                        <a data-bs-parent="#accordion" data-bs-toggle="collapse" href="#groupCollapsible" th:text="|#{joinableset.current.groups} (${joinableSetGroups.size()})|">Current Groups:</a>
                      </h4>
                    </div>
                    <div id="groupCollapsible" class="collapse">
                      <ul class="list-group">
                        <li class="list-group-item-action" th:each="group : ${joinableSetGroups}"><span th:text="${group.title}"></span></li>
                      </ul>
                    </div>
                  </div>
                  <div class="card">
                    <div class="card-header">
                      <h4 class="card-title">
                        <a data-bs-parent="#accordion" data-bs-toggle="collapse" href="#additionalGroupsCollapsible" th:text="#{joinableset.additional.groups}">Generate Additional Groups</a>
                      </h4>
                    </div>
                    <div id="additionalGroupsCollapsible" class="collapse">
                      <div class="col-sm-12">
                        <div class="sak-banner-info" th:text="#{joinableset.additional.instructions}">These groups will be added after saving the joinable set.</div>
                        <label class="form-control-label" for="groupNumber" th:text="#{joinableset.numberofgroups}">Number of groups:</label>
                        <input class="form-control" name="groupNumber" id="groupNumber" type="number" min="0" max="999" th:data-required="${joinableSetForm.joinableSetId == null}" th:field="*{groupNumber}" />
                        <label class="form-control-label" for="groupMaxMembers" th:text="#{joinableset.maxmembers}" th:field="*{groupMaxMembers}">Max members per group:</label>
                        <input class="form-control" name="groupMaxMembers" id="groupMaxMembers" type="number" min="1" max="999" th:field="*{groupMaxMembers}" />
                        <div class="form-check">
                          <label for="allowPreviewMembership">
                            <input class="form-check-input" name="allowPreviewMembership" id="allowPreviewMembership" type="checkbox" th:field="*{allowPreviewMembership}"/>
                            <span th:text="#{joinableset.allow.previewmembership}">Allow user to see group membership before joining</span>
                          </label>
                        </div>
                        <div class="form-check">
                          <label for="allowViewMembership">
                            <input class="form-check-input" name="allowViewMembership" id="allowViewMembership" type="checkbox" th:field="*{allowViewMembership}"/>
                            <span th:text="#{joinableset.allow.viewmembership}">Allow members to see the other members of these groups after joining</span>
                          </label>
                        </div>
                      </div>
                      <div class="clearfix"></div>
                    </div>
                  </div>
                  <div class="card">
                    <div class="card-header">
                      <h4 class="card-title">
                        <a data-bs-parent="#accordion" data-bs-toggle="collapse" href="#notJoinedUsersCollapsible" th:text="|#{joinableset.unjoined.users} (${notJoinedUserList.size()})|">Users who have not yet joined a group in this set</a>
                      </h4>
                    </div>
                    <div id="notJoinedUsersCollapsible" class="collapse">
                      <ul class="list-group">
                        <li class="list-group-item-action" th:each="user : ${notJoinedUserList}"><span th:text="|${user.displayName} (${user.eid})|"></span></li>
                      </ul>
                    </div>
                  </div>
                </div>
              </div>
              <div class="act">
                <input th:if="${joinableSetForm.joinableSetId == null}" accesskey="s" disabled="disabled" id="create-joinableset-submit-button" type="submit" class="active" th:value="#{joinableset.button.add}"/>
                <input th:if="${joinableSetForm.joinableSetId != null}" accesskey="s" id="save-joinableset-submit-button" type="submit" class="active" th:value="#{joinableset.button.save}"/>
                <a th:href="@{/deleteJoinableSet(joinableSetId=${joinableSetForm.joinableSetId})}" th:if="${joinableSetForm.joinableSetId != null}" accesskey="d" id="delete-joinableset-submit-button" type="submit" class="btn btn-secondary" th:text="#{joinableset.button.delete}">Delete Joinable Set</a>
                <button type="button" th:data-url="@{/}" accesskey="x" id="create-joinableset-cancel-button" class="btn btn-link" th:text="#{joinableset.button.cancel}">Cancel</button>
              </div>
              <div class="modal fade" tabindex="-1" role="dialog" aria-hidden="true" id="confirmation-modal">
                <div class="modal-dialog modal-md">
                  <div class="modal-content">
                    <div class="modal-header">
                      <h4 th:text="#{joinableset.modal.confirm}" class="modal-title">Confirm</h4>
                      <button type="button" class="btn btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body">
                      <div class="sak-banner-warn" th:text="#{joinableset.modal.confirm.instruction}">You are about delete the following joinable set.</div>
                    </div>
                    <div class="modal-footer act">
                      <button type="button" class="btn btn-link active" id="modal-btn-confirm" th:text="#{joinableset.button.delete}" onclick="SPNR.disableControlsAndSpin( this, null );">Delete the joinable set</button>
                      <button type="button" class="btn btn-secondary" id="modal-btn-cancel" th:text="#{joinableset.button.cancel}">Cancel</button>
                    </div>
                  </div>
                </div>
              </div>
          </form>
        </div>
      </div>
    </div>
  </div>
  <script th:replace="fragments/javascript :: joinableSetJs" />
</body>
</html>
